<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>

  <meta charset="UTF-8">

  <title>Stackicons - Icon Fonts for Web Designers</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="description" content="Stackicons are icon fonts for web designers with added flexibility, including multiple button shapes and a unique multi-color option. Free and open source, Stackicons-Social includes finely-crafted icons for over 60 social brands. The Stackicons project is by Parker Bennett, a web designer and front-end developer based in Los Angeles.">

  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="Stackicons">
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  <meta property="og:title" content="Stackicons">
  <meta property="og:site_name" content="Stackicons">
  <meta property="og:image" content="http://stackicons.com/og-image.png">
  <meta property="og:image:type" content="image/png">

	<link rel="SHORTCUT ICON" href="favicon.ico">
  <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57.png">

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link rel="stylesheet" href="css/stackicons-min.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

  <style>

  </style>

</head>

<body>
  <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div class="page-wrap">
  <header>
    <div class="wrap">
      <h1><a class="stackicons-logo text-left" href="http://stackicons.com"><span></span>Stackicons</a></h1>
      <h2 class="nobr">Doing More with Icon Fonts</h2>
      <nav class="nav-top st-shape-icon st-single-color-brand">
        <ul>
          <li><a title="Twitter" class="st-icon-twitter" href="https://twitter.com/stackicons">Twitter</a></li>
          <li><a title="Facebook" class="st-icon-facebook-alt" href="https://facebook.com/stackicons">Facebook</a></li>
          <li><a title="Github" class="st-icon-github-alt" href="http://github.com/parkerbennett">Github</a></li>
       <li><a title="Email" class="st-icon-email" href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;"><span></span>&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;</a></li>
       <li><a class="button github">Fork Me on GitHub</a></li>
        </ul>
      </nav>

    </div> <!-- end .wrap -->
  </header>

  <section class="hero">
    <div class="wrap clearfix">

      <div class="hero-icons">
  <a class="st-icon-dribbble st-multi-color st-shape-icon" href="http://dribbble.com/parkerbennett"><span></span>Dribbble</a>
  <a class="st-icon-github st-multi-color st-shape-icon" href="http://github.com/parkerbennett"><span></span>Github</a>
  <a class="st-icon-gmail st-multi-color st-shape-icon" href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;"><span></span>Email</a>
      <nav class="twitter-row st-multi-color">
        <a class="st-icon-twitter st-shape-square" href="https://twitter.com/stackicons">Twitter</a>
        <a class="st-icon-twitter st-shape-rounded1" href="https://twitter.com/stackicons">Twitter</a>
        <a class="st-icon-twitter st-shape-rounded2" href="https://twitter.com/stackicons">Twitter</a>
        <a class="st-icon-twitter st-shape-rounded3" href="https://twitter.com/stackicons">Twitter</a>
        <a class="st-icon-twitter st-shape-circle" href="https://twitter.com/stackicons">Twitter</a>
        <a class="st-icon-twitter st-shape-icon" href="https://twitter.com/stackicons">Twitter</a>
    </nav>
      </div> <!-- end .hero-icons -->

      <div class="intro">
      <p><strong>Stackicons</strong> are icon fonts for the web, designed to do <span class="nobr">more &#8212;</span> <span class="nobr-wide">with multiple</span> button shapes and <span class="nobr">a unique</span> <span class="nobr">&ldquo;multi-color&rdquo;</span> option. <span class="nobr-wide">The <strong>Stackicons-Social</strong></span> font and <span class="nobr-wide">Sass-based</span> construction kit are free and open source, created by <a href="http://parkerbennett.com" class="nobr">Parker Bennett</a>.</p>
     <a  class="button download">Download it Free</a>
      </div> <!-- end .intro -->

    </div> <!-- end .wrap -->
  </section> <!-- end .hero -->

  <section class="news">
    <div class="wrap clearfix">
      <section class="news-content">

        <h2>News</h2>
        <p class="lede">To kick off the site launch, I wrote an article about Stackicons for <a  target="_blank"><strong class="nobr">CSS-Tricks.</strong> <span class="nobr">Check it out!</span></a></p>

        </section>

        <section class="signup">
        <!-- Begin MailChimp Signup Form -->
          <div id="mc_embed_signup">
            <form action="http://stackicons.us3.list-manage1.com/subscribe/post?u=a1d9b151d29974948b4cdcff9&amp;id=7b1b8c2871" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
              <label for="mce-EMAIL">Updates?</label>
              <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
              <div style="position: absolute; left: -5000px;">
                <input type="text" name="b_a1d9b151d29974948b4cdcff9_7b1b8c2871" value="">
              </div>
              <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </form>
          </div>
          <!--End mc_embed_signup-->
        </section><!-- end .signup -->

      </section><!-- end .news-content -->
    </div> <!-- end .wrap -->
  </section> <!-- end .news -->

  <section class="callout-panels clearfix">
    <div class="wrap">

      <div class="callout-panel-group">

        <div class="callout-panel panel1">
          <h2>Finely Crafted</h2>
      <p><strong>Stackicons-Social</strong> includes over 60 up-to-date icons for modern social brands &#8212; <span class="nobr">from App.net</span> to Zerply. Each icon was meticulously crafted to look great at multiple sizes, with five different button shapes, from square to circle, or <span class="nobr">icon-only.</span></p>
          <nav class="nav-social icons-panel1">
            <ul>
              <li><a class="st-icon-twitter st-shape-r0"></a></li>
              <li><a class="st-icon-facebook st-shape-r1"></a></li>
              <li><a class="st-icon-googleplus st-shape-r2"></a></li>
              <li><a class="st-icon-youtube st-shape-r3"></a></li>
              <li><a class="st-icon-pinterest st-shape-r4"></a></li>
              <li><a class="st-icon-instagram st-shape-r5"></a></li>
            </ul>
          </nav>
        </div> <!-- end .panel1 -->

        <div class="callout-panel panel2">
          <h2 class="nobr">Easy to Customize</h2>
          <p>Want to change the default button shape and color style, adjust colors or more? Just change the variables in the Sass construction kit files. <span class="nobr">You can</span> also override with built-in styles. <a class="nobr" href="examples.html" target="_blank">See some examples</a>.</p><p class="nav-list st-shape-icon"><a class="st-icon-codepen">Try it on CodePen</a></p>
        </div>

      </div><!-- end .callout-panel-group -->

      <div class="callout-panel-group">

        <div class="callout-panel panel3">
          <h2>Colorful</h2>
          <p>Stackicons <span class="nobr">stack &#8212;</span> using overlapping colors to create &ldquo;multi-color&rdquo; icons with a contemporary <span class="nobr">flat look.</span> (Think of two-color or screen printing.)
          <!-- dribbble -->
  <div class="st-demo"><span class="dribbble-1">&#xe127;</span><span class="dribbble-2">&#xe128;</span><span class="dribbble-3">&#xe126;</span><span class="dribbble-4">&#xe129;</span><b>&rarr;</b><a class="st-icon st-multi-color st-icon-dribbble-alt st-shape-icon"><span></span>Dribbble</a></div>

        </div>

        <div class="callout-panel panel4">
          <h2>Free</h2>
          <p>
          <strong>Stackicons-Social</strong> is open source and <strong class="nobr">100% free</strong> for any use. <a class="nobr">Give it a try!</a></p>
          <small><a href="https://spb.io/AY3rLlt5aG">Want to support the project?</a> Any amount would be a big help. <span class="nobr">As a</span> small thank you, I&rsquo;ll send you <strong>Stackicons-Social-Complete</strong>, with a few more of my own <span class="nobr">custom icons.</small>
          <a class="button darker contribute-button" href="https://spb.io/AY3rLlt5aG">Contribute</a>
        </div>

      </div><!-- end .callout-panel-group -->

    </div> <!-- end .wrap -->
  </section>

  <section class="font-sample wrap">
    <h2 class="font-sample-name">Stackicons-Social</h2>
    <div class="control-font clearfix">
      <div class="control-shape">
        <a class="make-icon-only nobr active">icon-only</a><a class="make-square">square</a><a class="make-r1">rounded1</a><a class="make-r2">rounded2</a><a class="make-r3">rounded3</a><a class="make-circle">circle</a>
      </div>
      <div class="control-color"><a class="toggle-color active">multi-color</a>
      </div>
    </div>
    <nav class="stackicons-font-sample st-multi-color st-shape-r5">
      <!-- inline-block: comment-out white space
           or don't close tags, or -5px margin-right -->
      <a title="AddThis" class="st-icon-addthis">Add This</a>
      <a title="App.net" class="st-icon-adn">App.net</a>
      <a title="Amazon" class="st-icon-amazon"><span></span>Amazon</a>
      <a title="Android" class="st-icon-android"><span></span>Android</a>
      <a title="Apple" class="st-icon-apple">Apple</a>
      <a title="Behance" class="st-icon-behance">Behance</a>
      <a title="Blogger" class="st-icon-blogger">Blogger</a>
      <a title="CodePen" class="st-icon-codepen">Codepen</a>
      <a title="Delicious" class="st-icon-delicious"><span></span>Delicious</a>
      <a title="deviantART" class="st-icon-deviantart"><span></span>Deviant Art</a>
      <a title="Digg" class="st-icon-digg">Digg</a>
      <a title="Dribbble" class="st-icon-dribbble"><span></span>Dribbble</a>
      <a title="Dribbble" class="st-icon-dribbble-alt"><span></span>Dribbble</a>
      <a title="Dropbox" class="st-icon-dropbox">Dropbox</a>
      <a title="Ebay" class="st-icon-ebay"><span></span>Ebay</a>
      <a title="Email" class="st-icon-email"><span></span>Email</a>
      <a class="st-icon-email2">Email</a>
      <a title="Evernote" class="st-icon-evernote">Evernote</a>
      <a title="Facebook" class="st-icon-facebook">Facebook</a>
      <a title="Facebook" class="st-icon-facebook-alt">Facebook</a>
      <a title="Flattr" class="st-icon-flattr"><span></span>Flattr</a>
      <a title="Flickr" class="st-icon-flickr"><span></span>Flickr</a>
      <a title="Forrst" class="st-icon-forrst"><span></span>Forrst</a>
      <a title="Foursquare" class="st-icon-foursquare"><span></span>Foursquare</a>
      <a title="GitHub" class="st-icon-github"><span></span>Github</a>
      <a title="GitHub" class="st-icon-github-alt"><span></span>Github</a>
      <a title="Gittip" class="st-icon-gittip">Gittip</a>
      <a title="Gmail" class="st-icon-gmail"><span></span>Gmail</a>
      <a title="Gmail" class="st-icon-gmail-alt"><span></span>Gmail</a>
      <a title="Google" class="st-icon-google">Google</a>
      <a title="Google+" class="st-icon-googleplus">Google+</a>
      <a title="IMDb" class="st-icon-imdb"><span></span>IMDb</a>
      <a title="Instagram" class="st-icon-instagram"><span></span>Instagram</a>
      <a title="Kickstarter" class="st-icon-kickstarter">Kickstarter</a>
      <a title="Last.fm" class="st-icon-lastfm">last.fm</a>
      <a title="LinkedIn" class="st-icon-linkedin">LinkedIn</a>
      <a title="Microsoft" class="st-icon-microsoft"><span></span>Microsoft</a>
      <a title="Myspace" class="st-icon-myspace">Myspace</a>
      <a title="Pandora" class="st-icon-pandora">Pandora</a>
      <a title="PayPal" class="st-icon-paypal"><span></span>Paypal</a>
      <a title="PayPal" class="st-icon-paypal2"><span></span>Paypal</a>
      <a title="Picasa" class="st-icon-picasa"><span></span>Picasa</a>
      <a title="Pinboard" class="st-icon-pinboard">Pinboard</a>
      <a title="Pinterest" class="st-icon-pinterest"><span></span>Pinterest</a>
      <a title="Rdio" class="st-icon-rdio">Rdio</a>
      <a title="Reddit" class="st-icon-reddit"><span></span>Reddit</a>
      <a title="RSS" class="st-icon-rss">RSS</a>
      <a title="ShareThis" class="st-icon-sharethis">ShareThis</a>
      <a title="Skype" class="st-icon-skype"><span></span>Skype</a>
      <a title="SlideShare" class="st-icon-slideshare"><span></span>Slideshare</a>
      <a title="SoundCloud" class="st-icon-soundcloud">Soundcloud</a>
      <a title="Spotify" class="st-icon-spotify"><span></span>Spotify</a>
      <a title="StumbleUpon" class="st-icon-stumbleupon">Stumbleupon</a>
      <a title="Stack Overflow" class="st-icon-stackoverflow"><span></span>Stack Overflow</a>
      <a title="Tumblr" class="st-icon-tumblr">Tumblr</a>
      <a title="Twitter" class="st-icon-twitter">Twitter</a>
      <a title="Vimeo" class="st-icon-vimeo">Vimeo</a>
      <a title="Vine" class="st-icon-vine">Vine</a>
      <a title="Windows" class="st-icon-windows">Windows</a>
      <a title="Windows 7" class="st-icon-windows7"><span></span>Windows 7</a>
      <a title="Wordpress" class="st-icon-wordpress">Wordpress</a>
      <a title="Xing" class="st-icon-xing"><span></span>Xing</a>
      <a title="Yahoo" class="st-icon-yahoo"><span></span>Yahoo</a>
      <a title="Yelp" class="st-icon-yelp"><span></span>Yelp</a>
      <a title="YouTube" class="st-icon-youtube"><span></span>YouTube</a>
      <a title="YouTube" class="st-icon-youtube2"><span></span>YouTube</a>
      <a title="YouTube" class="st-icon-youtube-alt"><span></span>YouTube</a>
      <a title="Zerply" class="st-icon-zerply">Zerply</a>
      <a title="Search" class="st-icon-search">Search</a>
      <a class="st-icon-search-alt"><span></span>Search</a>
      <a title="Menu" class="st-icon-menu">Menu</a>
      <a title="Menu" class="st-icon-menu-alt">Menu</a>
      <a title="Menu" class="st-icon-menu-alt2">Menu</a>
      <a title="More..." class="st-icon-more">More&#8230;</a>
      <a title="Submenu" class="st-icon-triangle-down">More</a>
    </nav>
    <a class="toggle-ssmin">View Stackicons-Social</a>
  </section> <!-- end .font-sample wrap -->
  <p class="wrap"><small>*A smaller font, Stackicons-Social-Minimal, provides a subset of more commonly used icons.</small></p>
  <section class="usage wrap">
    <h2>Using Stackicons</h2>
    <p><strong>Stackicons-Social</strong> comes with default CSS that you can link to or @import. There&rsquo;s a usage guide to get you started, along with <a href="examples.html">some examples</a>.</p>
    <p>If you&rsquo;re comfortable using Sass, you can customize things extensively just by changing variables in the Sass construction kit files: brand colors, default size, shape and spacing, hover effects and more.<p>
    <p>Questions? Suggestions? Need a custom icon font for your own project? <span class="nobr"><a href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;">Email me</a>.</span></p>
<a class="button button-small">Download it Free</a><a class="button darker button-small" href="https://spb.io/AY3rLlt5aG">&nbsp;Contribute Now&nbsp;</a>
  </section
</div> <!-- end .wrap -->

<footer>
	  <div class="wrap clearfix">
      <div class="copyright">
        <p>Copyright &#169; <script language="JavaScript" type="text/javascript">document.write((new Date()).getFullYear());</script><noscript>2014</noscript> Parker Bennett.</p>
        <p>Stackicons-Social is <a href="http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web" target="_blank">SIL Open Font</a> <span class="link-color">and</span> <a class="nobr"href="http://opensource.org/licenses/MIT" target="_blank">MIT licensed</a>.</p>
        <p>All copyrights and trademarks are the property <span class="nobr">of their respective owners.</span></p>
      </div>
    <small class="right text-right">Hosting by <a href="http://mdtm.pl/1lTyAWF" target="_blank">Media Temple</a>.</small>
</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script>

<script>
    $('.toggle-color').click(function () {
      $(this).toggleClass('active');
      $('.stackicons-font-sample').toggleClass('st-multi-color');
    });

    $('.make-square').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
      $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r0');
    });

    $('.make-r1').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
      $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r1');
    });

    $('.make-r2').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
      $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r2');
    });

    $('.make-r3').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r3');
    });

    $('.make-circle').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
      $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r4');
    });

    $('.make-icon-only').click(function () {
      $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
      $(this).addClass('active');
      $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r5');
    });

    $('.toggle-ssmin').click(function () {
      $(this).toggleClass('active');
      $('.font-sample-name').toggleClass('active');
      $('.stackicons-font-sample .st-icon-addthis, .stackicons-font-sample .st-icon-amazon, .stackicons-font-sample .st-icon-android, .stackicons-font-sample .st-icon-apple, .stackicons-font-sample .st-icon-behance, .stackicons-font-sample .st-icon-blogger, .stackicons-font-sample .st-icon-delicious, .stackicons-font-sample .st-icon-deviantart, .stackicons-font-sample .st-icon-digg, .stackicons-font-sample .st-icon-dropbox, .stackicons-font-sample .st-icon-ebay, .stackicons-font-sample .st-icon-evernote, .stackicons-font-sample .st-icon-flattr, .stackicons-font-sample .st-icon-forrst, .stackicons-font-sample .st-icon-foursquare, .stackicons-font-sample .st-icon-gittip, .stackicons-font-sample .st-icon-google, .stackicons-font-sample .st-icon-imdb, .stackicons-font-sample .st-icon-kickstarter, .stackicons-font-sample .st-icon-lastfm, .stackicons-font-sample .st-icon-microsoft, .stackicons-font-sample .st-icon-myspace, .stackicons-font-sample .st-icon-pandora, .stackicons-font-sample .st-icon-paypal, .stackicons-font-sample .st-icon-paypal2, .stackicons-font-sample .st-icon-picasa, .stackicons-font-sample .st-icon-rdio, .stackicons-font-sample .st-icon-reddit, .stackicons-font-sample .st-icon-sharethis, .stackicons-font-sample .st-icon-skype, .stackicons-font-sample .st-icon-slideshare, .stackicons-font-sample .st-icon-soundcloud, .stackicons-font-sample .st-icon-spotify, .stackicons-font-sample .st-icon-stumbleupon, .stackicons-font-sample .st-icon-stackoverflow, .stackicons-font-sample .st-icon-vine, .stackicons-font-sample .st-icon-windows, .stackicons-font-sample .st-icon-windows7, .stackicons-font-sample .st-icon-wordpress, .stackicons-font-sample .st-icon-xing, .stackicons-font-sample .st-icon-yahoo, .stackicons-font-sample .st-icon-yelp, .stackicons-font-sample .st-icon-zerply, .stackicons-font-sample .st-icon-search-alt, .stackicons-font-sample .st-icon-menu-alt, .stackicons-font-sample .st-icon-menu-alt2, .stackicons-font-sample .st-icon-more').toggleClass('hide');
    });

</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47890813-1', 'stackicons.com');
  ga('send', 'pageview');

</script>
</body>

</html>
